<template>
  <div class="q-table-wrap">
    <div class="q-table">
      <el-table
        ref="tableRef"
        v-loading="state.loading"
        :row-key="state.rowKey"
        :border="true"
        :show-overflow-tooltip="true"
        :scrollbar-always-on="true"
        :data="state.tableSource"
        v-bind="$attrs"
      >
        <el-table-column v-for="(item, index) in state.columns" :key="index" v-bind="item" :column-key="item.prop">
          <template v-slot:default="scope">
            <slot
              v-if="item.slotName"
              :name="item.slotName"
              v-bind="{ item, rowData: scope.row, prop: item.prop, $index: scope.$index }"
            />
            <template v-else>{{ scope.row[item.prop] }}</template>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="q-pagination" v-if="state.showPagination">
      <el-pagination
        v-model:current-page="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 50, 100]"
        :total="pagination.total"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { reactive, watch, ref, onMounted } from 'vue'
import { useElementSize } from '@vueuse/core'

const emits = defineEmits(['register'])
const tableRef = ref(null)
const tableRefWidth = ref(0)

const state = reactive({
  rowKey: '',
  columns: [],
  tableSource: [],
  loading: false,
  immediate: true,
  listApi: null,
  showPagination: true,
  getFilter: () => ({})
})

const pagination = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0
})

const testMethod = val => {
  console.log('testMethod: ' + val)
}

const getList = () => {
  const filter = state.getFilter() || {}
  const params = {
    ...filter,
    pageNum: state.showPagination ? pagination.pageNum : undefined,
    pageSize: state.showPagination ? pagination.pageSize : undefined
  }
  state.listApi(params).then(res => {
    state.tableSource = res.rows || res.data
    state.showPagination && (pagination.total = res.total)
  })
}

const initData = data => {
  const { rowKey, columns, immediate, listApi, getFilter, showPagination } = data
  state.rowKey = rowKey || 'id'
  state.columns = columns
  state.tableSource = data.tableSource
  state.listApi = listApi
  if (immediate !== undefined) {
    state.immediate = immediate
  }
  if (showPagination !== undefined) {
    state.showPagination = showPagination
  }
  if (immediate === false) {
    return
  }
  if (getFilter !== undefined) {
    state.getFilter = getFilter
  }
  getList()
}

const onSizeChange = val => {
  pagination.pageSize = val
  getList()
}

const onCurrentChange = val => {
  pagination.pageNum = val
  getList()
}

const reload = (firstPage = true) => {
  if (firstPage) {
    pagination.pageNum = 1
  }
  getList()
}

onMounted(() => {
  tableRefWidth.value = tableRef.value?.$el?.clientWidth
  if (state?.columns?.length) {
    const len = state.columns.length
    if (len * 150 > tableRefWidth.value) {
      state.columns.forEach(item => {
        item.width = item.width || 150
      })
    }
  }
})

// watch(
//   width,
//   val => {
//     console.log('width: ', val)
//
//     if (val < 768) {
//       state.columns.forEach(item => {
//         item.width = undefined
//       })
//     } else {
//       state.columns.forEach(item => {
//         item.width = item.width || 150
//       })
//     }
//   },
//   { immediate: true }
// )

emits('register', { testMethod, initData, reload })
</script>

<style scoped>
.q-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>
